<template>
<Form :labelWidth="80" style="padding: 0 16px" lablePosition="center" class="modelwp">
    <!-- <FieldItem v-model="curProperty.routing"
        labelType="blackMargin"
        :config="{type: 'select', options: compGroup.getRoutingOptions()}"
        :formItemProps="{label: $t(`compDesign.jProperty.routing`)}"
        @change="changeRoutingTree"
    /> -->
    <FieldItem v-model="curProperty.model"
        labelType="blackMargin"
        :config="{type: 'cascader',filterable:true, options: compGroup.getModelTree('', 'model')}"
        :formItemProps="{label: $t(`compDesign.jProperty.model`)}"
        @change="changeTree"
    >
    <Button v-show="curProperty.model.length" type="primary" ghost class="ivu-ml"
        @click="compGroup.updateModelField()"
    >{{ $t(`compDesign.jProperty.syncModelFileds`) }}</Button>
    </FieldItem>
    <!-- <FieldItem v-if="curProperty.otherAttr" v-model="curProperty.otherAttr.hierLinkModel"
        labelType="blackMargin"
        :config="{type: 'cascader', options: compGroup.getModelTree()}"
        :formItemProps="{label: 'hierLinkModel'}"
    /> -->

    <Tabs v-show="hierData.length" value="0" :animated="false" class="propertyTab">
        <TabPane v-for="(item,index) in hierData" :label="item.title" :key="index" :name="index + ''">
            <Table :columns="propertyColumns" :data="item.properties"></Table>
        </TabPane>
    </Tabs>
</Form>
</template>

<script>
    import storeVar from '../../mixins/storeVar';
    import {mapState} from 'vuex';

    export default {
        mixins: [storeVar],
        props: {
            // calcProperty: {
            //     default() {
            //         return {};
            //     }
            // }
        },
        data () {
            return {
                hierData: [
                ],
                propertyColumns: [
                    {type: 'index', width: 60},
                    {key: 'type', title: '类型'},
                    {key: 'name', title: '名称'},
                    {key: 'defaultValue', title: '默认值'},
                    {key: 'comments', title: '备注'},
                    {key: 'code', title: '可查询'},
                ]
            };
        },
        methods: {
            changeTree (model) {
                if (this.tools.testType(model) !== 'array') {
                    this.modelValue = [];
                }
                this.compGroup.setModel(model);
                this.syncGroup();
            },
            getHier(curItem) {
                if (curItem.hierProperties && curItem.hierProperties.content) {
                    curItem.hierProperties.content.forEach(item => {
                        this.hierData.push({
                            title: `${item.name}-${item.nodeId}`,
                            properties: item.properties
                        })
                    })
                }
                // console.log("file: model.vue:85  getHier", this.hierData)
            }
        },
        watch: {
            'curProperty.model': {
                handler(val) {
                    if (val) {
                        let curItem = this.all.find(item => item.type === val[1] && item.className === val[2])

                        // console.log("file: model.vue watch-model1", val, curItem)
                        // debugger
                        if (val.length === 3) {
                            this.hierData.push({
                                title: curItem.comments || curItem.className,
                                properties: curItem.features.map(item=> {
                                    return {
                                        type: item.fieldType,
                                        name: item.fieldName,
                                        comments: item.comments,
                                        code: item.fieldCode,
                                        defaultValue: item.defaultValue
                                    }
                                })
                            })
                            this.getHier(curItem)
                        } else if (val.length === 4 && curItem.hierProperties) {
                            let res = curItem.hierProperties.content.find(item => item.nodeId === val[3])
                            res && this.hierData.push({
                                title: `${res.name}-${res.nodeId}`,
                                properties: res.properties
                            })
                            // console.log("file: model.vue watch-model2", val[3],curItem.hierProperties.content, res)
                        }
                    }
                }, immediate: true, deep: true
            }
        },
        computed: {
            ...mapState('admin/model',[
                'all'
            ]),
        }
    };
</script>

<style lang="less">
.property-editor .modelwp {
    .propertyTab {
        margin-top: 12px;
    }
}
</style>
